﻿@page "/alerts"

<h1>Alerts</h1>

<p>Provide contextual feedback messages for typical user actions with a handful of available and flexible alert messages.</p>

<h3>Examples</h3>
<p>Alerts are available for any length of text, as well as an optional event for dismissing the alert. For proper styling use one of the eight <strong>required</strong> color classes (e.g. Color.Primary). For inline dismissal, set IsDismissable to true.</p>
<div class="docs-example">
    <BSAlert Color="Color.Primary">
        This is a primary alert — check it out!
    </BSAlert>
    <BSAlert Color="Color.Secondary">
        This is a secondary alert — check it out!
    </BSAlert>
    <BSAlert Color="Color.Success">
        This is a success alert — check it out!
    </BSAlert>
    <BSAlert Color="Color.Danger">
        This is a danger alert — check it out!
    </BSAlert>
    <BSAlert Color="Color.Warning">
        This is a warning alert — check it out!
    </BSAlert>
    <BSAlert Color="Color.Info">
        This is a info alert — check it out!
    </BSAlert>
    <BSAlert Color="Color.Light">
        This is a light alert — check it out!
    </BSAlert>
    <BSAlert Color="Color.Dark">
        This is a dark alert — check it out!
    </BSAlert>
</div>

<PrettyCode CodeFile="_content/SampleCore/snippets/alerts/alerts1.html" />

<h3>Link color</h3>

<p>Use the .alert-link utility class to quickly provide matching colored links within any alert.</p>

<div class="docs-example">
    <BSAlert Color="Color.Primary">
        This is a primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
    </BSAlert>
    <BSAlert Color="Color.Secondary">
        This is a secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
    </BSAlert>
    <BSAlert Color="Color.Success">
        This is a success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
    </BSAlert>
    <BSAlert Color="Color.Danger">
        This is a danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
    </BSAlert>
    <BSAlert Color="Color.Warning">
        This is a warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
    </BSAlert>
    <BSAlert Color="Color.Info">
        This is a info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
    </BSAlert>
    <BSAlert Color="Color.Light">
        This is a light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
    </BSAlert>
    <BSAlert Color="Color.Dark">
        This is a dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
    </BSAlert>
</div>
<PrettyCode CodeFile="_content/SampleCore/snippets/alerts/alerts2.html" />

<h3>Additional content</h3>

<p>Alerts can also contain additional HTML elements like headings, paragraphs and dividers.</p>

<div class="docs-example">
    <BSAlert Color="Color.Success">
        <h4 className="alert-heading">Well done!</h4>
        <p>
            Aww yeah, you successfully read this important alert message. This example text is going
            to run a bit longer so that you can see how spacing within an alert works with this kind
            of content.
        </p>
        <hr />
        <p className="mb-0">
            Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
        </p>
    </BSAlert>
</div>
<PrettyCode CodeFile="_content/SampleCore/snippets/alerts/alerts3.html" />

<h3>Dismissing</h3>

<p>Using Blazor it is possible to dismiss any alert by setting IsDismissable to true. You can also hook into the OnDismiss Event to add additional functionality.</p>

<div class="docs-example">
    <BSAlert Color="Color.Info" IsDismissible="true" OnDismiss="@OnDismiss">
        I am an alert and I can be dismissed!
    </BSAlert>
</div>
<PrettyCode CodeFile="_content/SampleCore/snippets/alerts/alerts4.html" />

<h3>Closing</h3>

<p>Using Blazor you can show and hide alerts and reopen closed alerts. Here's how:</p>
<ul>
    <li>Attach the IsOpen property to a variable in your code section.</li>
    <li>Using the OnClick method of a button, or any clickable component, set the value of your IsOpen property to true or false. (Make sure to call StateHasChanged in your onclick method.)</li>
</ul>

<p>Using Blazor you can also set your alerts to autohide after a specified duration. Here's how:</p>
<ul>
    <li>Attach the @@bind-IsOpen property to a variable in your code section.</li>
    <li>Set the AutoHide property to true.</li>
    <li>Set the AutoHideDelay property to number of milliseconds you wish to delay the alert's closing. (<strong>optional</strong> - Default = 4000ms)</li>
</ul>

<div class="docs-example">
    <BSAlert Color="Color.Info" IsOpen="@isOpen">
        Toggle the alert with the button below
    </BSAlert>
    <BSButton @onclick="@onclick">Toggle Alert</BSButton>
</div>
<PrettyCode CodeFile="_content/SampleCore/snippets/alerts/alerts5.html" />

<h3>Properties</h3>

<table class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>Property</th>
            <th>Type</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Color</td>
            <td>Color enum</td>
            <td>Applies the selected color to the alert</td>
        </tr>
        <tr>
            <td>IsOpen</td>
            <td>bool</td>
            <td>Opens and closes the alert</td>
        </tr>
        <tr>
            <td>IsDismissible</td>
            <td>bool</td>
            <td>Adds the ability to dismiss the alert</td>
        </tr>
        <tr>
            <td>AutoHide</td>
            <td>bool</td>
            <td>Auto hides the alert after the specified delay in milliseconds (Default is 4000ms). When using autohide, you also need to use @@bind-IsOpen to be able to properly re-open the alert again.</td>
        </tr>
        <tr>
            <td>AutoHideDelay</td>
            <td>int</td>
            <td>Sets the delay in milliseconds for auto hiding the alert.</td>
        </tr>
    </tbody>
</table>


@code {
    private bool isOpen = true;

    void OnDismiss()
    {
        Console.WriteLine("OnDismiss");
        StateHasChanged();
    }

    void onclick(MouseEventArgs e)
    {
        isOpen = !isOpen;
    }
}
